<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>吃分</title>
    <link rel="stylesheet" href="style.css">
    <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
     <!-- <img src="./hotdog.jpg" alt="" class="hotdog"> 
  <img src="./guanjun.jpg" alt="" class="guanjun"> -->
    <img src="./wsc.jpg" alt="" class="wsc">

    <div class="play_panel">
        <div class="start">
            <span class="btn">❥开始游戏</span>
        </div>
        <div class="stop">
            <div class="title">游戏结束</div>
            <div class="score">60分</div>
            <!-- <div class="btn">❥开始游戏</div> -->
        </div>
    </div>

    <div class="game_score">
        <h1>剩余时间
            <span>60</span>
            秒
        </h1>
        <h1>+0分</h1>
    </div>
</body>
<script>
    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min)
    }


    var wscObj = document.querySelector('.wsc')
    var score = 0
    var wscX = 0
    var wscY = (window.innerHeight || document.documentElement.clientHeight) - wscObj.offsetHeight
    // console.log(wscY);

    var foodT = setInterval(function () {
        var imgObj = document.createElement('img');
        var who = random(0, 9);
        if ([6, 8].includes(who)) {
            imgObj.className = 'food guanjun';
            imgObj.src = 'guanjun.jpg';
            imgObj.setAttribute('type', 'guanjun')

        } else {
            imgObj.className = 'food hotdog';
            imgObj.src = 'hotdog.jpg'
            imgObj.setAttribute('type', 'hotdog')

        }
        var min = 0;
        var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth;
        imgObj.style.left = random(min, max) + 'px';
        imgObj.style.top = '0px';
        document.body.appendChild(imgObj);
    }, 400);


    setInterval(function () {
        var foodObjs = document.querySelectorAll('.food');
        foodObjs.forEach(function (item, index) {
            var top = parseInt(item.style.top) + 2;
            var maxTop = (window.innerHeight || document.documentElement.clientHeight) - item
                .offsetHeight;
            // console.log(maxTop);
            if (top >= maxTop) {
                document.body.removeChild(item)
            } else {
                item.style.top = top + 'px'
            }

            var foodX = parseInt(item.style.left)
            var foodY = parseInt(item.style.top) + item.offsetHeight
            if (foodX > wscX && foodX <= (wscX + wscObj.offsetWidth) && foodY > wscY) {

                document.querySelector('.game_score h1:nth-of-type(2)').innerText = `+${score}分`
                document.body.removeChild(item)
                // console.log(item);
                var type = item.getAttribute('type')
                type == 'guanjun' ? score += 5 : score++
                var divObj = document.createElement('div')
                divObj.className = 'show_score'
                divObj.innerText = type == 'guanjun' ? '+5' : '+1'
                divObj.style.left = wscX + wscObj.offsetWidth + 'px'
                document.body.appendChild(divObj)
                setTimeout(function () {
                    document.body.removeChild(divObj)
                }, 1000)
            }

        })
    })


    document.onmousemove = function (evt) {
        var e = evt || window.event
        var wscObj = document.querySelector('.wsc')
        var left = e.clientX - wscObj.offsetWidth / 2
        var right = e.clientX - wscObj.offsetWidth / 2
        // console.log(left);
        var maxLeft = (window.innerWidth || document.documentElement.offsetWidth) - wscObj.offsetWidth
        // console.log(maxLeft);
        if (left < 0) left = 0
        if (left >= maxLeft) {
            left = maxLeft
        }
        wscObj.style.left = left + 'px'
        wscX = left
    }

    var time = 60
    var t = setInterval(function () {
        time--
        var gameScoreObj = document.querySelector('.game_score span')
        if (time >= 0) {
            gameScoreObj.innerText = time
        } else {
            clearInterval(t)
            clearInterval(foodT)
            time = 60
            var payPanel = document.querySelector('.play_panel')
            var payPanelStop = payPanel.querySelector('.stop')
            payPanel.querySelector('.score').innerText = score + '分'
            payPanel.style.display = payPanelStop.style.display = 'block'
        }
    }, 200)
</script>
</html>